<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>前端测试页面</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 5px;
        }
        .success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
        .error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }
        .info { background-color: #d1ecf1; color: #0c5460; border: 1px solid #bee5eb; }
        button {
            background-color: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover {
            background-color: #0056b3;
        }
        #log {
            background-color: #f8f9fa;
            border: 1px solid #dee2e6;
            padding: 15px;
            border-radius: 5px;
            max-height: 300px;
            overflow-y: auto;
            font-family: monospace;
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 前端服务测试页面</h1>
        
        <div class="status info">
            <strong>测试目的：</strong>检查前端服务是否正常运行，排查JavaScript错误
        </div>
        
        <div class="status" id="status">
            <strong>状态：</strong>正在检查...
        </div>
        
        <div>
            <button onclick="testBasicJS()">测试基础JavaScript</button>
            <button onclick="testFetch()">测试网络请求</button>
            <button onclick="testLocalStorage()">测试本地存储</button>
            <button onclick="testConsole()">测试控制台</button>
            <button onclick="clearLog()">清空日志</button>
        </div>
        
        <h3>测试日志：</h3>
        <div id="log"></div>
    </div>

    <script>
        function log(message, type = 'info') {
            const logDiv = document.getElementById('log');
            const timestamp = new Date().toLocaleTimeString();
            const logEntry = document.createElement('div');
            logEntry.innerHTML = `[${timestamp}] ${type.toUpperCase()}: ${message}`;
            logEntry.style.color = type === 'error' ? 'red' : type === 'success' ? 'green' : 'black';
            logDiv.appendChild(logEntry);
            logDiv.scrollTop = logDiv.scrollHeight;
            console.log(`[${timestamp}] ${type.toUpperCase()}: ${message}`);
        }
        
        function updateStatus(message, type = 'info') {
            const statusDiv = document.getElementById('status');
            statusDiv.innerHTML = `<strong>状态：</strong>${message}`;
            statusDiv.className = `status ${type}`;
        }
        
        function testBasicJS() {
            try {
                log('开始测试基础JavaScript功能...');
                
                // 测试变量声明
                const testVar = 'Hello World';
                log(`变量测试: ${testVar}`, 'success');
                
                // 测试数组操作
                const testArray = [1, 2, 3, 4, 5];
                const doubled = testArray.map(x => x * 2);
                log(`数组操作测试: [${doubled.join(', ')}]`, 'success');
                
                // 测试对象操作
                const testObj = { name: '测试', value: 123 };
                log(`对象测试: ${JSON.stringify(testObj)}`, 'success');
                
                // 测试Promise
                Promise.resolve('Promise测试成功').then(result => {
                    log(result, 'success');
                });
                
                updateStatus('基础JavaScript测试通过', 'success');
                
            } catch (error) {
                log(`基础JavaScript测试失败: ${error.message}`, 'error');
                updateStatus('基础JavaScript测试失败', 'error');
            }
        }
        
        function testFetch() {
            log('开始测试网络请求...');
            
            // 测试前端服务自身
            fetch(window.location.origin)
                .then(response => {
                    log(`前端服务响应状态: ${response.status}`, 'success');
                    return response.text();
                })
                .then(html => {
                    log(`前端服务响应长度: ${html.length} 字符`, 'success');
                })
                .catch(error => {
                    log(`前端服务请求失败: ${error.message}`, 'error');
                });
            
            // 测试后端API
            fetch('http://localhost:8081/api/auth/test')
                .then(response => {
                    log(`后端API响应状态: ${response.status}`, 'success');
                    return response.text();
                })
                .then(data => {
                    log(`后端API响应: ${data}`, 'success');
                    updateStatus('网络请求测试通过', 'success');
                })
                .catch(error => {
                    log(`后端API请求失败: ${error.message}`, 'error');
                    updateStatus('后端API连接失败', 'error');
                });
        }
        
        function testLocalStorage() {
            try {
                log('开始测试本地存储...');
                
                // 测试localStorage
                const testKey = 'test_key';
                const testValue = 'test_value_' + Date.now();
                
                localStorage.setItem(testKey, testValue);
                const retrieved = localStorage.getItem(testKey);
                
                if (retrieved === testValue) {
                    log('localStorage读写测试通过', 'success');
                    localStorage.removeItem(testKey);
                    log('localStorage清理完成', 'success');
                    updateStatus('本地存储测试通过', 'success');
                } else {
                    throw new Error('localStorage读写不一致');
                }
                
            } catch (error) {
                log(`本地存储测试失败: ${error.message}`, 'error');
                updateStatus('本地存储测试失败', 'error');
            }
        }
        
        function testConsole() {
            log('开始测试控制台功能...');
            
            console.log('这是一个console.log测试');
            console.warn('这是一个console.warn测试');
            console.error('这是一个console.error测试');
            console.info('这是一个console.info测试');
            
            log('控制台测试完成，请检查浏览器开发者工具', 'success');
            updateStatus('控制台测试完成', 'success');
        }
        
        function clearLog() {
            document.getElementById('log').innerHTML = '';
            log('日志已清空');
        }
        
        // 页面加载完成后自动运行基础测试
        window.addEventListener('load', function() {
            log('页面加载完成');
            updateStatus('页面已加载，可以开始测试', 'success');
            
            // 自动运行基础测试
            setTimeout(() => {
                testBasicJS();
            }, 1000);
        });
        
        // 捕获全局错误
        window.addEventListener('error', function(event) {
            log(`全局错误: ${event.error.message} 在 ${event.filename}:${event.lineno}`, 'error');
            updateStatus('检测到JavaScript错误', 'error');
        });
        
        // 捕获Promise错误
        window.addEventListener('unhandledrejection', function(event) {
            log(`未处理的Promise错误: ${event.reason}`, 'error');
            updateStatus('检测到Promise错误', 'error');
        });
    </script>
</body>
</html>
